import React, { Component, useState, useLayoutEffect } from 'react'

// 自定义hook其实也是函数，只不过函数的开头必须是 use，采用小驼峰式的命名
function useLocalStorage () {
  const [ username, setUsername ] = useState('')
  useLayoutEffect(() => {
    setUsername(localStorage.getItem('username'))
  })

  return username
}

function Header () {
  const username = useLocalStorage()
  return (
    <h1>header - { username }</h1>
  )
}
function Content () {
  const username = useLocalStorage()
  return (
    <div>content - { username }</div>
  )
}


export default class App extends Component {
  render() {
    return (
      <div>
        <Header />
        <Content />
      </div>
    )
  }
}
